<template>
	<div class="background">
		<div class="modelbox" :style="{width:modelboxWidth+'px'}">
			<div class="title">
				<!-- <i class="el-icon-setting" style="font-size: 20px;margin-right: 4px;"></i> -->
				<div class="title-text">
					{{title}}
				</div>
				<el-button v-if="preview" v-show="previewShow" @click="previewFn" size="mini" style="position:absolute;right:60px;">预览</el-button>
				<el-button v-if="preview" v-show="!previewShow" @click="previewFn" size="mini" style="position:absolute;right:60px;">返回</el-button>
				<i class="el-icon-close" @click="close" style="position:absolute;right:20px;font-size: 24px;font-weight: bold;color: #C1C1C1;cursor: pointer;"></i>
			</div>
			<div class="content">
				<slot></slot>
			</div>	
		</div>
	</div>
</template>

<script>
	export default{
		props: {
			title: String,
			preview: Boolean,
			modelboxWidth:
			{
				type: Number,
				default:800
			} 
		},
		watch:{

		},
		data(){
			return{
				previewShow: true,				
			}
		},
		mounted(){
			
		},
		methods: {
			close(){
				this.$emit('close')
			},
			previewFn(){
				this.previewShow = !this.previewShow
				this.$emit('previewFn',this.previewShow)
			},
			clear(){
				this.previewShow = true
			},
		},
		components: {
			
		}
	}
</script>

<style src="../../styles/modelBox.scss" lang="scss" scoped>
</style>
<style lang="scss">
</style>